@use "./mixins" as *;
@use "./vars" as *;
// @use './sidebar-link.scss';

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--sidebar-width-xs);
  padding: 48px 32px;
  overflow-y: auto;
  background-color: var(--bg-color);
  transition:
    background-color var(--el-transition-duration-fast),
    opacity 0.25s,
    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate(-100%);

  @media (max-width: 767px) {
    z-index: var(--sidebar-z-index-mobile);
    width: calc(var(--vp-sidebar-width-mobile) - 14px);
  }

  @include respond-to("md") {
    z-index: var(--sidebar-z-index-mobile);
    width: calc(var(--vp-sidebar-width-small));
  }

  @include respond-to("lg") {
    top: var(--header-height);
    z-index: var(--sidebar-z-index);
    transform: translate(0);
  }

  @include respond-to("xxl") {
    width: calc(var(--vp-sidebar-width-small) + 32px);
    padding: 48px 32px;
  }

  @include respond-to("max") {
    width: calc(var(--vp-sidebar-width-small) + 48px);
    padding: 48px;
  }

  &.open {
    transform: translate(0);
  }

  .sidebar-groups {
    padding: 0;

    @include respond-to("lg") {
      padding-bottom: 48px;
    }

    .sidebar-group__title {
      margin-bottom: 8px;
      font-size: 1rem;
      font-weight: 700;
      line-height: 24px;
    }

    .sidebar-group + .sidebar-group {
      padding-top: 24px;
    }
  }
}
